<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='Ext-util-ComponentDragger'>/**
</span> * @class Ext.util.ComponentDragger
 * @extends Ext.dd.DragTracker
 * &lt;p&gt;A subclass of Ext.dd.DragTracker which handles dragging any Component.&lt;/p&gt;
 * &lt;p&gt;This is configured with a Component to be made draggable, and a config object for the
 * {@link Ext.dd.DragTracker} class.&lt;/p&gt;
 * &lt;p&gt;A {@link #} delegate may be provided which may be either the element to use as the mousedown target
 * or a {@link Ext.DomQuery} selector to activate multiple mousedown targets.&lt;/p&gt;
 */
Ext.define('Ext.util.ComponentDragger', {

<span id='Ext-util-ComponentDragger-cfg-constrain'>    /**
</span>     * @cfg {Boolean} constrain
     * Specify as &lt;code&gt;true&lt;/code&gt; to constrain the Component to within the bounds of the {@link #constrainTo} region.
     */

<span id='Ext-util-ComponentDragger-cfg-delegate'>    /**
</span>     * @cfg {String/Element} delegate
     * Optional. &lt;p&gt;A {@link Ext.DomQuery DomQuery} selector which identifies child elements within the Component's encapsulating
     * Element which are the drag handles. This limits dragging to only begin when the matching elements are mousedowned.&lt;/p&gt;
     * &lt;p&gt;This may also be a specific child element within the Component's encapsulating element to use as the drag handle.&lt;/p&gt;
     */

<span id='Ext-util-ComponentDragger-cfg-constrainDelegate'>    /**
</span>     * @cfg {Boolean} constrainDelegate
     * Specify as &lt;code&gt;true&lt;/code&gt; to constrain the drag handles within the {@link #constrainTo} region.
     */

    extend: 'Ext.dd.DragTracker',

    autoStart: 500,

<span id='Ext-util-ComponentDragger-method-constructor'>    /**
</span>     * Creates new ComponentDragger.
     * @param {object} comp The Component to provide dragging for.
     * @param {object} config (optional) Config object
     */
    constructor: function(comp, config) {
        this.comp = comp;
        this.initialConstrainTo = config.constrainTo;
        this.callParent([ config ]);
    },

    onStart: function(e) {
        var me = this,
            comp = me.comp;

        // Cache the start [X, Y] array
        this.startPosition = comp.getPosition();

        // If client Component has a ghost method to show a lightweight version of itself
        // then use that as a drag proxy unless configured to liveDrag.
        if (comp.ghost &amp;&amp; !comp.liveDrag) {
             me.proxy = comp.ghost();
             me.dragTarget = me.proxy.header.el;
        }

        // Set the constrainTo Region before we start dragging.
        if (me.constrain || me.constrainDelegate) {
            me.constrainTo = me.calculateConstrainRegion();
        }
    },

    calculateConstrainRegion: function() {
        var me = this,
            comp = me.comp,
            c = me.initialConstrainTo,
            delegateRegion,
            elRegion,
            shadowSize = comp.el.shadow ? comp.el.shadow.offset : 0;

        // The configured constrainTo might be a Region or an element
        if (!(c instanceof Ext.util.Region)) {
            c =  Ext.fly(c).getViewRegion();
        }

        // Reduce the constrain region to allow for shadow
        if (shadowSize) {
            c.adjust(0, -shadowSize, -shadowSize, shadowSize);
        }

        // If they only want to constrain the *delegate* to within the constrain region,
        // adjust the region to be larger based on the insets of the delegate from the outer
        // edges of the Component.
        if (!me.constrainDelegate) {
            delegateRegion = Ext.fly(me.dragTarget).getRegion();
            elRegion = me.proxy ? me.proxy.el.getRegion() : comp.el.getRegion();

            c.adjust(
                delegateRegion.top - elRegion.top,
                delegateRegion.right - elRegion.right,
                delegateRegion.bottom - elRegion.bottom,
                delegateRegion.left - elRegion.left
            );
        }
        return c;
    },

    // Move either the ghost Component or the target Component to its new position on drag
    onDrag: function(e) {
        var me = this,
            comp = (me.proxy &amp;&amp; !me.comp.liveDrag) ? me.proxy : me.comp,
            offset = me.getOffset(me.constrain || me.constrainDelegate ? 'dragTarget' : null);

        comp.setPosition(me.startPosition[0] + offset[0], me.startPosition[1] + offset[1]);
    },

    onEnd: function(e) {
        if (this.proxy &amp;&amp; !this.comp.liveDrag) {
            this.comp.unghost();
        }
    }
});</pre>
</body>
</html>
